<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Css trick-vertical align</title>
		<link class="exclude" rel="stylesheet" type="text/css" href="css/global.css"></link>
		<link class="exclude" rel="stylesheet" type="text/css" href="css/style.css"></link>  
	</head>
	<body>
		<div id="valign-demo">
			<h2 class="demo-part">1，文字垂直居中</h2>
			<div id="txtDemo" class="demo-part demo-ct">
				垂直居中的文字，利用line-height
			</div>
			<h2 class="demo-part">2，未知高度IMG垂直居中A-vertical-align加一个冗余标签</h2>
			<div id="imgDemo1" class="demo-part demo-ct">
				<div class="box-c">
					<img src="img/Haggard.jpg" alt="" /><span class="box-c-fix"></span>
				</div>
				<!--img标签和span.box-c-fix中间不能有空格否则在ie里面可能导致不能居中.另外.box-c-fix换成div标签貌似也不好用-->
			</div>
			<h2 class="demo-part">3，未知高度IMG垂直居中B-css hack模仿table的居中方式(老外的方法)</h2>
			<div id="imgDemo2" class="demo-part demo-ct">
				<div class="tbCell">
					<img class="vMiddleElm" src="img/Haggard.jpg" alt="" />
				</div>
			</div>
			<h2 class="demo-part">4，未知高度IMG垂直居中C-国人发明的BT HACK(据说源于淘宝)</h2>
			<div id="imgDemo3" class="demo-part demo-ct">
				<div class="box-c"><img src="img/Haggard.jpg" alt="" /></div>
			</div>
			<h2 class="demo-part">&nbsp;</h2>
		</div>
	</body>
</html>
